<template>
    <section>
        <h2>质检标准</h2>
        <el-form ref="myForm" label-width="100px" :model="formData">
            <el-row>
                <el-col :sm="12" :md="8" :lg="6">
                    <el-form-item label="用户姓名" prop="id">
                        <el-input v-model="formData.user_name"/>
                    </el-form-item>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <el-form-item label="电话号码" prop="mobile">
                        <el-input v-model="formData.mobile" maxlength="11"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-button type="primary" @click.prevent="handleQuery(1)" native-type="submit">查询</el-button>
                <el-button @click="handleReset()" native-type="button">重置</el-button>
                <el-button type="primary" native-type="button" @click="insertVisible = true">新增</el-button>
            </el-row>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="item in tableColumns" :prop="item.prop" :label="item.label" width="180"
                :key="item.prop">
            </el-table-column>
            <el-table-column label="操作">
              <template scope="scope">
                <el-button @click="handleUpdate(scope.row)" type="primary" size="small">修改</el-button>
                <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formData.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
    </section>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            formData: {
                user_name: "",
                mobile: "",
                type: "",
                // 分页条件：查询页数
                currentPage: 1,
                // 分页条件：每页行数
                pageSize: 20
            },
            tableColumns: [
                {
                    prop: "t_user_id",
                    label: "编号"
                },
                {
                    prop: "user_name",
                    label: "姓名"
                },
                {
                    prop: "mobile",
                    label: "电话号码"
                },
            ],
            tableData: [],
            // 总行数，后端返回
            total: 0,
            insertVisible: false,
            updateVisible: false,
            updateRow: null,
        }
    },
    methods: {
        handleQuery(page) {
            const token = localStorage.getItem("token");
            console.log("token =",token);
            this.formData.currentPage = page;
            axios({
                url: "/api/user/queryList",
                method: "post",
                // get请求参数通过params传递，POST请求参数通过data传递
                data: this.formData,
                headers: {
                    Authorization: localStorage.getItem("token")
                }
            }).then(res => {
                console.log(res);
                if (res.data.code > 0) {
                    this.tableData = res.data.data;
                }
            },error => {
                console.log("出现异常：",error);
            })
        },
        handleReset() {
            this.$refs.myForm.resetFields();
            this.formData.pageSize = 1;
            this.handleQuery(1);
        },
        // 每页行数变化
        handleSizeChange(pageSize) {
            this.formData.pageSize = pageSize;
            this.handleQuery(1);
        },
        // 当前页数变化
        handleCurrentChange(currentPage) {
            this.handleQuery(currentPage);
        },
        handleInsertClose() {
            this.insertVisible = false;
        },
        handleUpdateClose() {
            this.updateVisible = false;
        },
        // 处理增加成功
        handleSuccess() {
            this.insertVisible = false;
            this.updateVisible = false;
            this.handleReset();
        },
        handleUpdate(row) {
            // console.log("row = ",row);
            this.updateRow = row;
            this.updateVisible = true;
        }
    }
}
</script>

<style></style>